<template>
	<view>
		<view v-if="vuex_isMobile" class="content-news-m">
			<view class="news-item" v-for="(item, index) in newsList" :key="index" @click="chooseNew(item)">
				<view class="news-title-box">
					<view class="">
						<view class="news-title">
							{{item.title}}
						</view>
						<view class="news-subtitle">
							{{item.article1}}
						</view>
					</view>
					<view class="">
						<image :src="item.thumb" style="width: 490px;height: 381px;"></image>
					</view>
				</view>
				<view v-if="!item.thumb" class="news-title1">
					{{item.title}}
				</view>
				<view v-if="!item.thumb" class="news-subtitle">
					{{item.article1}}
				</view>
				<view class="news-time">
					{{showTime(item.createTime)}}
				</view>
			</view>
			<cc-listPageView :totalNum="totalNum" :pageCount="queryForm.pageSize" :curPageNum="queryForm.pageNo" :beishu="1.8"
				@pageClick="pageClick">
			</cc-listPageView>
		</view>
		<view v-else class="content-news">
			<view class="news-item" v-for="(item, index) in newsList" :key="index" @click="chooseNew(item)">
				<view class="news-title">
					{{item.title}}
				</view>
				<view class="news-subtitle u-line-3">
					{{item.article1}}
				</view>
				<view class="news-time">
					{{showTime(item.createTime)}}
				</view>
			</view>
			<cc-listPageView :totalNum="totalNum" :pageCount="queryForm.pageSize" :curPageNum="queryForm.pageNo" :beishu="1"
				@pageClick="pageClick">
			</cc-listPageView>
		</view>
	</view>

</template>

<script>
	import {
		getNewsList,
	} from "@/common/api.js";
	export default {
		data() {
			return {
				newsList: [],
				totalNum: 0,
				queryForm: {
					menuId: '',
					pageSize: 5,
					pageNo: 1
				},
			}
		},
		onLoad() {

		},
		computed: {
			showTime() {
				return (timestamp) => {
					const date = new Date(timestamp);
					return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
				}
			}
		},
		methods: {
			chooseNew(item) {
				uni.navigateTo({
					url: '/pages/new-detail?id=' + item.id
				})
			},
			getInfo(id) {
				this.queryForm.menuId = id
				this.requestData()
			},
			requestData() {
				getNewsList(this.queryForm).then(res => {
					res.data.list.map(item => {
						item.article1 = item.article.replace(
								/<(p|div)[^>]*>(<br\/?>|&nbsp;)<\/\1>/gi,
								'\n')
							.replace(/<br\/?>/gi, '\n').replace(/<[^>/]+>/g, '')
							.replace(/(\n)?<\/([^>]+)>/g, '').replace(/\u00a0/g, ' ')
							.replace(/&nbsp;/g, ' ').replace(/<\/?(img)[^>]*>/gi, '')
							.replace(/&amp;/g, "&").replace(/&lt;/g, "<")
							.replace(/&gt;/g, ">")
							.replace(/&#39;/g, "\'")
							.replace(/&quot;/g, "\"")
							.replace(/<\/?.+?>/g, "")
					})
					this.newsList = res.data.list
					this.totalNum = res.data.total
				})
			},
			pageClick(tag) {
				if (tag === 0) {
					// 上一页 (不等于第一页)
					if (this.queryForm.pageNo > 1) {

						this.queryForm.pageNo--;
						this.requestData();
					}
				} else {
					// 下一页 (不等于最后一页)
					if (this.totalNum > (this.queryForm.pageNo * this.queryForm.pageSize)) {
						this.queryForm.pageNo++;
						this.requestData();
					}

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-news-m {
		padding: 0 80px;

		.news-item {

			.news-title-box {
				display: flex;
			}

			.news-title {
				padding-top:  80px;
				font-weight: 400;
				font-size: 50px;
				color: #151515;
				line-height: 74px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}

			.news-title1 {
				padding-top:  80px;
				font-weight: 400;
				font-size: 50px;
				color: #151515;
				line-height: 74px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.news-subtitle {
				font-weight: 400;
				font-size: 43px;
				color: #A0A4B9;
				line-height: 74px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				padding-top: 18px;
			}

			.news-time {
				font-weight: 400;
				font-size: 43px;
				color: #BBBBBB;
				line-height: 32px;
				padding-top: 18px;
			}

		}

	}

	.content-news {
		padding-top: 30px;

		.news-item {
			margin-bottom: 20px;
			border-bottom: 1px solid #EAEAEA;
			cursor: pointer;

			.news-title {
				font-weight: 400;
				font-size: 16px;
				color: #434343;
				line-height: 21px;
				margin-bottom: 10px;
			}


			.news-subtitle {
				font-weight: 400;
				font-size: 14px;
				color: #686868;
				line-height: 19px;
				text-indent: 4ch;
				margin-bottom: 10px;
			}

			.news-time {
				font-weight: 400;
				font-size: 14px;
				color: #BBBBBB;
				line-height: 19px;
				margin-bottom: 10px;
			}

		}

	}
</style>